<!-- 客户类别 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <view class="color-list">
        <view class="p-20" v-for="(item, index) in list" :key="index">
          <cxTreeListItem
            :paramData="item"
            layer="0"
            @addItem="addItem"
            @delectItem="delectItem"
            @clickItem="clickItem"
          >
          </cxTreeListItem>
        </view>
      </view>
    </view>
    <!-- 添加客户类别 -->
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      :closeOnClickOverlay="false"
    >
      <view class="popup-view">
        <view class="title"> 客户类别 </view>
        <view class="form-view m-b-40">
          <view class="form-item">
            名称:<u--input border="surround" v-model="label.name"></u--input>
          </view>
        </view>
        <view class="bot-view flex flex-sa">
          <view class="btn" @click="onCencal"> 取消 </view>
          <view class="btn" @click="onSave"> 保存 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getTypeData } from "@/apis/bill/information/custom";
import cxTreeListItem from "@/components/cx-tree-list-item/cx-tree-list-item.vue";
import { arrayToTree } from "@/utils/util.js";
export default {
  components: {
    clIcon,
    cxTreeListItem,
  },
  data() {
    return {
      search: null,
      indexList: [],
      config: {
        title: "客户类别",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        // rightButton: [
        //   {
        //     key: "btn1",
        //     icon: "&#xe727;",
        //     position: "left",
        //   },
        // ],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10,
        },
      },
      // 显示模态框
      show: false,
      label: {
        seq: "",
        name: "",
        period: "",
        sort: 3,
        remarks: "",
      },
    };
  },
  computed: {},
  onLoad() {
    this.initData();
  },
  methods: {
    clickItem(val) {
      // 返回上一级并传输参数
      uni.$emit("on-selected-customer", val);
      uni.navigateBack();
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      uni.showLoading({
        title: "加载中",
      });
      getTypeData(this.params)
        .then((res) => {
          if (!res.flag) return;
          // this.list = res.data;
          // console.log('[ res.data ] >', res.data)
          this.list = arrayToTree(res.data,{
            isAddIcon: false,
            isDelectIcon: false
          });
          console.log("[ this.list ] >", this.list);
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
    scrolltolower() {},
    getName(name) {
      return "bei";
    },
    searchChange() {
      this.indexList = [];
      this.params.page.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        // this.$Router.push({
        //   name: "informationWarehouseWarehouseDetails",
        // });
        this.show = true;
      }
    },
    onCencal() {
      this.label = "";
      this.show = false;
    },
    onSave() {
      // addOrUpdateList([this.label]).then(res => {
      //   if (!res.flag) return;
      //   this.label = {
      //     "seq": "",
      //     "name": "",
      //     "period": "",
      //     "sort": 3,
      //     "remarks": "",
      //   }
      //   this.show = false
      //   this.initData()
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
